<template>
  <div class="article-comment">
    <el-card>
      <p class="article-operator-comment">看帖是喜欢，评论才是真爱</p>
      <tinymce-comment-editor v-model="param.content" ref="editor" v-on:uploadCallBack="uploadCall" />
      <div class="article-operator-comment-btns">
        <div class="btn-container">
          <my-emoji v-on:myEmoji="insertEmoji" />
          <el-popover>
            <upload-picture v-on:uploadCallBack="uploadCall"/>
            <font-awesome-icon class="emoji-open" slot="reference" :icon="['fa', 'image']" style="margin:0 5px"></font-awesome-icon>
          </el-popover>
        </div>
        <el-button size="mini" @click="submitComment">评论</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import myEmoji from '../../common/components/myEmoji'
import uploadPicture from '../../common/components/uploadPicture'
import tinymceCommentEditor from '../tinymceCommentEditor'
import { GetUrlParam } from '../../utils/getUrlParams'
export default {
  data () {
    return {
      // 评论内容参数
      param: {
        article_id: '',
        equipment_id: '',
        content: ''
      }
    }
  },
  created () {},
  // DOM对象加载完成时
  mounted () {
  },
  methods: {
    uploadCall (msg) { // 回调方法，接收子组件传的参数
      this.param.content += msg
    },
    // 添加表情
    insertEmoji (msg) {
      // console.log(msg)
      this.param.content += msg
    },
    // 触发兄弟组件中的按钮事件
    triggerBrotherMethods () {
      this.$emit('triggerBrotherMethods')
    },
    // 发布评论
    async submitComment () {
      // console.log(this.$refs.editor)
      // console.log(this.$refs.editor.value)
      if (this.$refs.editor.value === null) {
        return null
      }
      const url = this.$config.urls.get('comment')
      this.param.article_id = GetUrlParam('articleid')
      this.param.equipment_id = sessionStorage.getItem('EQUIPMENTID_KEY')
      console.log(this.param)
      const { data: res } = await this.$http.post(url, this.param)
      console.log(res)
      if (res.code !== 0) {
        this.$message.error('评论失败！请稍后再试！')
      } else if (res.code === 500) {
        this.$message.error(res.error_message)
      }
      this.getCommentExperience()
      // 清空评论
      this.param.content = ''
      // 刷新评论
      this.triggerBrotherMethods()
    },
    // 评论经验
    getCommentExperience () {
      this.$memory.getUser().then(userString => {
        if (userString === null) {
          return
        }
        const user = JSON.parse(userString)
        // console.log(user)
        var id = user.id
        console.log(id)
        const url = this.$config.urls.get('comment_experience') + id
        this.$http.get(url).then(res => {
          if (res.data.code !== 0) {
            this.$message.warning(res.data.error_message)
          }
        })
      })
    }
  },
  destroyed () {},
  computed: {},
  name: 'articleComment',
  components: { myEmoji, uploadPicture, tinymceCommentEditor }
}
</script>

<style lang="less" scoped>
.article-comment{
  margin-top:20px
}
.article-operator-comment{
  color: #c0c4cc;
}
.article-operator-comment-btns{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-button{
    background-color: #00c3ff;
    color:#ffffff;
    font-weight: 600;
    font-size: 15px;
  }
}
.btn-container{
  display: flex;
  align-items: center;
}
</style>
